<template>
<head-top :loading='loading'>
  <view class="Addarea">
        <view class="Addarea_list">
          <view class="Addarea_ul">
              <view class="hui">收件人</view>
              <input type="text"  placeholder="输入收件人姓名" />
            </view>
            <view class="Addarea_ul">
              <view class="hui">手机号</view>
              <input type="number"  placeholder="输入有效手机号" />
            </view>
            <view class="Addarea_ul">
              <view class="hui">所在区域</view>
              <input type="text" v-model="select_opt" disabled @click="show = true"  placeholder="省、市、区、街道" />
            </view>
            <view class="Addarea_ul">
              <view class="hui">详细地址</view>
              <input type="text"  placeholder="如小区、楼栋号、门牌号等" />
            </view>
        </view>
      </view>
      <view class="flexconter">
        <button class="btnadd"> 保存</button>
      </view>
      <b-selectarea :show ="show" @change="change" @close="val=>show=val"></b-selectarea>
</head-top>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import  BSelectarea from '@/components/BSelectarea/BSelectarea.vue'
const loading = ref<boolean>(false)
const show = ref<boolean>(false)
const select_opt = ref<string>(null)
function change(node){
  show.value = false
  select_opt.value =node.join(',')
}
</script>
<style>
page{
  background:#fff
}
</style>
<style lang="scss" scoped>
@import './editarea.scss'
</style>